<template>
	<view class="uni-container">
	总开票 ：{{stats.all}}	已回款 : {{stats.money}}  待回款 : {{stats.all - stats.money}}
	<el-divider></el-divider>
	<el-date-picker
	  v-model="form.time"
	  type="monthrange"
	  range-separator="至"
	  start-placeholder="开始月份"
	  end-placeholder="结束月份"
	  size="mini"
	  >
	</el-date-picker>
	<el-button type="primary" size="mini" @click="getStatementStat">查询</el-button>
	<el-divider></el-divider>
  <view class="charts-box">
	<qiun-data-charts 
	  type="column"
	  :opts="opts"
	  :chartData="chartData"
	/>
  </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				stats : {
					all : 0,
					money : 0
				},
			  form:{
				time : []  
			  },
			  chartData: {},
			  //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		   opts: {
			 color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			 padding: [15,15,0,5],
			 legend: {},
			 xAxis: {
			   disableGrid: true
			 },
			 yAxis: {
			   data: [
				 {
				   min: 0
				 }
			   ]
			 },
			 extra: {
			   column: {
				 type: "group",
				 width: 30,
				 activeBgColor: "#000000",
				 activeBgOpacity: 0.08
			   }
			 }
		   }
			}
		},
        onLoad() {
			var date1 = new Date()
			date1.setMonth(date1.getMonth()+1)
			date1.setDate(-1)
			date1.setHours(0,0,0,0)
			var date2 = new Date()
			date2.setDate(1)
			date2.setHours(0,0,0,0)
			date2.setMonth(0)
			this.form.time[0] = date2
			this.form.time[1] = date1
            this.getStatementStat()
        },
		methods: {
			//获取数据
			getStatementStat(){
				var beginTime = new Date(this.form.time[0]).getTime()
				var endTime = new Date(this.form.time[1]).getTime()
				this.request("/getStatementStat",{beginTime:beginTime,endTime:endTime},(res) => {
					console.log(res)
					this.chartData = {
					categories: [],
					series: [
					  {
						name: "开票额度",
						data: []
					  },
					  {
						name: "已回款",
						data: []
					  },
					  {
						name: "本月回款",
						data: []
					  }
					]
				  }
					if(res.data.flag){
						this.stats.all = 0
						this.stats.money = 0
						this.chartData.categories = []
						this.chartData.series[0]["data"] = []
						this.chartData.series[1]["data"] = []
						this.chartData.series[2]["data"] = []
						var curDate = new Date(beginTime)
						while(curDate.getTime() < endTime){
							var key = this.getMonth(curDate.getTime())
							curDate.setMonth(curDate.getMonth()+1)
							this.chartData.categories.push(key)
							var kaipiao = 0
							if(res.data[key])
								kaipiao = res.data[key]["kaipiao"] || 0
							this.chartData.series[0]["data"].push(kaipiao)
							var benyue = 0
							if(res.data[key])
								benyue = res.data[key]["benyue"] || 0
							this.chartData.series[1]["data"].push(benyue)
							var huikuan = 0
							if(res.data[key])
								huikuan = res.data[key]["huikuan"] || 0
							this.chartData.series[2]["data"].push(huikuan)
							this.stats.all += kaipiao
							this.stats.money += huikuan
						}
					}
				})
			},
			getMonth(str){
				var d1 = new Date(str);
				return d1.getFullYear() + "-" + (d1.getMonth()+1);
			},
            // request请求
            request(path,options,success) {
				this.$axios.post(path,options)//传参
				.then(function(res){
					  success(res)
				})
				.catch(function(err){
					  console.log("请求失败233");
				});
            }
		}
	}
</script>

<style>

</style>
